<template>
 <div class="yingmoo-details">
<!-- nav导航  -->
    <div class="yingmooHerader">
      <header class="header">
        <p>欢迎您来鹰目
          <span class="register">请登录</span>
          <span class="login">免费注册</span>
          <span class="merchant">商家管理中心</span>
          <span class="member">会员中心
              <img src="../assets/ym-header/arrows.png" />
            </span>
          <span class="mean">我的收藏
              <img src="../assets/ym-header/arrows.png" />
            </span>
          <span class="serve">客户服务
              <img src="../assets/ym-header/arrows.png" />
            </span>
          <span class="tel">客服热线</span>
          <span class="num">
          <img src="../assets/ym-header/phone.png" class="tel_img" />400 650 7893</span>
        </p>
      </header>
    </div>
<!--  媒体导航  -->
    <div class="yingmoo-medianav">
      <div class="yingmoo_nav">
        <div class="navlogo_text">
          <img src="../assets/soso/first_img2.png" />
        </div>
        <div class="yingmoo_nav_mean">
          <div class="yingmoo_nav_mean_div">
            <input type="text" id="yingmoo_page_ipt" class="yingmoo_page_ipt" />
            <div class="btn_soso">
              <p>搜索</p>
            </div>
            <div class="btn_sousuo">
              <img src="../assets/ym-media/location.png" />
            </div>
          </div>
          <p class="hot_sousuo">热门搜索：
            <span>国际媒体</span>
            <span>LED</span>
            <span>地铁媒体</span>
            <span>电梯框架</span>
            <span>公交车身</span>
            <span>候车亭</span>
          </p>
        </div>
      </div>
      <div class="btn_my">
        <div class="btn_my_shopmall">
          <div class="img"></div>
          <p>我的商城</p>
          <div class="img1"></div>
        </div>
        <div class="btn_my_settle">
          <div class="img2"></div>
          <p>购物车结算</p>
          <div class="img1"></div>
        </div>
      </div>
    </div>
<!--  全部分类导航  -->
    <div class="yingmoo-column">
      <div class="navstrip"></div>
      <div class="navbag">
        <div class="column-navbar">
          <h1 class="column-title" @mouseenter='shoq=1' @mouseleave='shoq=0'>
            <img class="column-icon" src="../assets/ym-index/icon-yun1.png" />
            <span class="column-name">全部媒体分类</span>
            <img class="column-arrow" src="../assets/ym-index/bg-arrow.png" />
          </h1>
          <ul class="media-nav-tab" @mouseenter='shoq=1;show=2' @mouseleave='shoq=0,show=0' v-show='shoq==1'>
            <router-link tag="li" :class="{'router-link-exact-active': $route.name=='ymMediaDowntown'}" to="/ymMediaDowntown">市区媒体</router-link>
            <router-link tag="li" :class="{'router-link-exact-active': $route.name=='ymHighspeed'}" to="/ymHighspeed">高速媒体</router-link>
            <router-link tag="li" :class="{'router-link-exact-active': $route.name=='ymMediaPublic'}" to="/ymMediaPublic">公交媒体</router-link>
            <router-link tag="li" :class="{'router-link-exact-active': $route.name=='ymMetro'}" to="/ymMetro">地铁媒体</router-link>
            <router-link tag="li" :class="{'router-link-exact-active': $route.name=='ymAirport'}" to="/ymAirport">机场媒体</router-link>
            <router-link tag="li" :class="{'router-link-exact-active': $route.name=='ymMediaTrain'}" to="/ymMediaTrain">火车媒体</router-link>
            <router-link tag="li" :class="{'router-link-exact-active': $route.name=='ymPassenger'}" to="/ymPassenger">客运站媒体</router-link>
            <router-link tag="li" :class="{'router-link-exact-active': $route.name=='ymBuilding'}" to="/ymBuilding">楼宇媒体</router-link>
            <router-link tag="li" :class="{'router-link-exact-active': $route.name=='ymSuper'}" to="/ymSuper">商超媒体</router-link>
            <router-link tag="li" :class="{'router-link-exact-active': $route.name=='ymFeature'}" to="/ymFeature">特色区域媒体</router-link>
          </ul>

          <div class="coverage" @mouseenter='shoq=1,show=2' @mouseleave='shoq=0,show=0' v-show='show==2'>
            <button>市区媒体</button>
            <ul>
              <li>单立柱</li>
              <li>LED显示屏</li>
              <li>灯箱</li>
              <li>客车内广告</li>
              <li>车身</li>
              <li>座椅</li>
              <li>电视</li>
              <li>其他</li>
            </ul>
            <ul>
              <li>吊旗</li>
              <li>刷屏机</li>
              <li>椅座广告</li>
              <li>大牌</li>
              <li>墙面</li>
              <li>楼顶</li>
              <li>立地</li>
            </ul>
          </div>

        </div>
        <ul class="column-subtitle clearfix">
          <router-link tag="li" :class="{'router-link-exact-active': $route.name=='ymIndex'}" to="/">
            <li>首页</li>
          </router-link>
          <router-link tag="li" :class="{'router-link-exact-active': $route.name=='ymStore'}" to="/ymStore">
            <li>商城</li>
          </router-link>
          <router-link tag="li" :class="{'router-link-exact-active': $route.name=='ymCase'}" to="/ymCase">
            <li>案例展示</li>
          </router-link>
          <router-link tag="li" :class="{'router-link-exact-active': $route.name=='ymExpert'}" to="/ymExpert">
            <li>专家</li>
          </router-link>
          <router-link tag="li" :class="{'router-link-exact-active': $route.name=='ymExpert'}" to="/ymExpert">
            <li>国际媒体</li>
          </router-link>
          <router-link tag="li" :class="{'router-link-exact-active': $route.name=='ymExpert'}" to="/ymExpert">
            <li>鹰监测</li>
          </router-link>
          <router-link tag="li" :class="{'router-link-exact-active': $route.name=='ymMember'}" to="/ymMember">
            <li>会员中心</li>
          </router-link>
        </ul>
      </div>

    </div>
<!--  当前定位  -->
    <div class="locat">
      <img src="../assets/ym-details/dw.png" />
      <p>
        当前位置：
        <span>鹰目户外广告>北京>市区媒体>大牌></span>
        <span class="text">王府井品牌中心楼顶大牌</span>
      </p>
    </div>
<!--  媒体详情  -->
    <div class="clunm-conten">
      <div class="clunm-result">
        <div class="clunm-left">
          <div class="result-top">
            <img src="../assets/ym-details/details8.png" />
            <img src="../assets/ym-details/details8.png" />
            <img src="../assets/ym-details/details8.png" />
            <img src="../assets/ym-details/details8.png" />
          </div>
          <div class="result-down">
            <img src="../assets/ym-details/details2.png" />
            <img src="../assets/ym-details/details3.png" />
            <img src="../assets/ym-details/details4.png" />
            <img src="../assets/ym-details/details5.png" />
          </div>
        </div>
        <div class="clunm-right">
          <h3>
            媒体名称媒体名称媒体名称媒体名称
          </h3>
          <p class="time">
            更新时间：<span>2016-06-03 | </span><span>27次浏览</span>
          </p>
          <p>
            媒体编号： <span>YM0423213</span>
          </p>
          <p>
            媒体分类： <span>媒体分类</span>
          </p>
          <p>
            媒体位置： <span>北京市王府井</span>
          </p>
          <p>
            干例价： <span>20000元/年</span>
          </p>
          <p>
            媒体尺寸： <span>101m * 8m * 1面 = 808㎡</span>
          </p>
          <p>
            最短投放周期： <span>年</span>
          </p>
          <p>
            人流量： <span>300000人以上</span>
          </p>
          <p>
            车流量： <span></span>
          </p>
          <p>
            所在区域： <span>北京-东城区</span>
          </p>
          <button class="hot">加关注</button>
          <button class="shop">购物车结算</button>
        </div>
      </div>
      <div class="shop-detail">
        <h4>店铺详细信息</h4>
        <h3>公司名称公司名称公司名称</h3>
        <img src="../assets/ym-details/details1.png" />
        <p>主营媒体：<span>公交媒体、高速媒体</span></p>
        <p>该媒体总共发布媒体94条</p>
        <button>进入店铺</button>
      </div>
    </div>
<!--  基本信息、媒体地图、投放评论  -->
    <div class="details-message">
      <div class="message-left">
        <ul class="tab-nav">
          <li @mouseenter='shos=1'>基本信息</li>
          <li @mouseenter='shos=0,shon=1'>媒体地图</li>
          <li @mouseenter='shos=0,shon=0,shom=1'>投放评论</li>
        </ul>
<!--    基本信息    -->
        <div class="message" @mouseenter='shos=1' @mouseleave='shos=1' v-show='shos==1'>
          <div class="classify">
            <ul>
              <li>媒体分类： <span>市区媒体/大牌</span></li>
              <li>最短投放周期： <span>年</span></li>
              <li>媒体尺寸： <span>101m*8m*1面=808㎡</span></li>
              <li>亮灯时间： <span>年</span></li>
            </ul>
            <ul>
              <li>所在区域： <span>北京-东城区</span></li>
              <li>人流量： <span>300000人以上</span></li>
              <li>画面形式： <span>北京-东城区</span></li>
              <li>上画时间： <span>300000人以上</span></li>
            </ul>
            <ul>
              <li>媒体位置： <span>北京市王府井</span></li>
              <li>车流量： <span>车流量</span></li>
              <li>灯光形式： <span>北京市王府井</span></li>
              <li>数量： <span>车流量</span></li>
            </ul>
          </div>
          <div class="media-intro">
            <p>媒体简介： <span>高速公路是城市与城市连接的一道风景线，因高速公路以快速直达、节约时间等优势，赢得众人出行的首选，受众面广，旅客涵盖了各行各业人士。高       速广告为户外广告一种新型的信息传播媒体，由于沿线的景致单调、重复、周边视觉碍物少，因此造就了高速公路户外广告位具有了较强的视觉冲击力，更有简单、醒目、记忆永固、传播时效强、广告效果显等优点，有利于受众全面地接受。高速户外广告可以提供的是无间断地‘每周七天，</span></p>
          </div>
          <div class="firm-intro">
            <p>公司简介： <span>湖南银社传媒全称为湖南银社广告传媒有限公司，是湖南最大的最专业的社区公益生活圈媒体广告公司, 公司创建于1995年，总部位于湖南长沙市，现有员工60余人，银社传媒致力于整合政府优势资源，以经营公益事业促进企业的品牌发展的方式运营，公司媒体现已覆盖整个湖南省的地区级城市社区及小区，以扩张连锁经营的模式跨区域发展，公司的发展目标为：做强湖南区域，扩张发展全国区域，后期将在江西、湖北、广西、贵州发展。 湖南银社传媒创建的社区宣传栏媒体，是将媒体和社区进行嫁接，是一种新型重要的网络化细分媒体，企业通过它能够轻松找到营销活动所拟定的目标客户人群，可有效降低宣传成本，避免宣传浪费，为营销渗透社区提供了有效而精确的推广渠道，是企业文化和品牌文化融入社区居民的桥梁；公司长期和中国移动/中国联通/肯德基/步步高集团/友阿集团/苏宁电器/国美电器/通程电器/海尔电器/株百集团/梦洁家纺/佳惠集团/大洋百货/崇尚百货/新东方集团/宏图三胞/全友家私/东风汽车/老百姓大药房等知名企业建立了战略合作伙伴关系，并得到了各大商家和企业的肯定，银社传媒秉承“诚信、专业、及时、灵活”的服务理念，以诚信的合作态度、专业的媒体运作经验、及时灵活的执行力服务于每一位客户。 展望未来，湖南银社传媒将更专注社区的媒体开发、以更超前的媒体眼光、更创新的广告思维，为政府和企业之间搭建一座公益和商业运作相结合的媒体平台，以更敏捷的执行力为每一位品牌客户提供更优质的服务，成为中国社区媒体行业有一定影响力的公司，同时为公益媒介发展事业走出更好更宽阔道路。</span></p>
          </div>
        </div>
<!--    媒体地图    -->
        <div class="message" @mouseenter='shon=1' @mouseleave='shon=1' v-show='shon==1'>
          <div class="classify">
            <ul>
              <li>媒体分类： <span>市区媒体/大牌</span></li>
              <li>最短投放周期： <span>年</span></li>
              <li>媒体尺寸： <span>101m*8m*1面=808㎡</span></li>
              <li>亮灯时间： <span>年</span></li>
            </ul>
            <ul>
              <li>所在区域： <span>北京-东城区</span></li>
              <li>人流量： <span>300000人以上</span></li>
              <li>画面形式： <span>北京-东城区</span></li>
              <li>上画时间： <span>300000人以上</span></li>
            </ul>
            <ul>
              <li>媒体位置： <span>北京市王府井</span></li>
              <li>车流量： <span>车流量</span></li>
              <li>灯光形式： <span>北京市王府井</span></li>
              <li>数量： <span>车流量</span></li>
            </ul>
          </div>
          <div class="map">
            <img src="../assets/ym-details/map.png" />
          </div>
        </div>
<!--    投放评论    -->
        <div class="message" @mouseenter='shom=1' @mouseleave='shom=1' v-show='shom==1'>
          <div class="classify">
            <ul>
              <li>媒体分类： <span>市区媒体/大牌</span></li>
              <li>最短投放周期： <span>年</span></li>
              <li>媒体尺寸： <span>101m*8m*1面=808㎡</span></li>
              <li>亮灯时间： <span>年</span></li>
            </ul>
            <ul>
              <li>所在区域： <span>北京-东城区</span></li>
              <li>人流量： <span>300000人以上</span></li>
              <li>画面形式： <span>北京-东城区</span></li>
              <li>上画时间： <span>300000人以上</span></li>
            </ul>
            <ul>
              <li>媒体位置： <span>北京市王府井</span></li>
              <li>车流量： <span>车流量</span></li>
              <li>灯光形式： <span>北京市王府井</span></li>
              <li>数量： <span>车流量</span></li>
            </ul>
          </div>
          <div class="discusses-nav">
            投放评论
          </div>
          <div class="discusses">
            <p><span class="text">英雄主义： </span><span>该媒体 本人挺喜欢的该媒体 本人挺喜欢的该媒体 本人挺喜欢的</span><span class="imges"><img src="../assets/ym-details/star.png" /></span><span class="score">4.0分</span><span class="time">2015-08-11  14:34:45</span></p>
            <p><span class="text">匿名： </span><span>该媒体 本人挺喜欢的该媒体 </span><span class="imges"><img src="../assets/ym-details/star.png" /></span><span class="score">4.0分</span><span class="time">2015-08-11  14:34:45</span></p>
            <p><span class="text">英雄主义： </span><span>该媒体 本人挺喜欢的该媒体 本人挺喜欢的该媒体 本人挺喜欢的该媒体 本人挺喜欢的该媒体 本人挺喜欢的该媒体 本人挺喜欢的该媒体 本人挺喜欢的该媒体 本人挺喜欢的该媒体 本人挺喜欢的该媒体 本人挺喜欢的该媒体 本人挺喜欢的该媒体 本人挺喜欢的该媒体 本人挺喜欢的该媒体 本人挺喜欢的该媒体 本人挺喜欢的</span><span class="imges"><img src="../assets/ym-details/star.png" /></span><span class="score">4.0分</span><span class="time">2015-08-11  14:34:45</span></p>
            <p><span class="text">用户名称： </span><span>该媒体 本人挺喜欢的该媒体 本人挺喜欢的该媒体 本人挺喜欢的</span><span class="imges"><img src="../assets/ym-details/star.png" /></span><span class="score">4.0分</span><span class="time">2015-08-11  14:34:45</span></p>
            <p><span class="text">用户名称： </span><span>该媒体 本人挺喜欢的该媒体 本人挺喜欢的该媒体 本人挺喜欢的</span><span class="imges"><img src="../assets/ym-details/star.png" /></span><span class="score">4.0分</span><span class="time">2015-08-11  14:34:45</span></p>
          </div>
          <div class="synthesize">
            <div class="block">
              <span class="demonstration">综合评分： </span>
              <el-rate
                v-model="value2"
                :colors="['#99A9BF', '#F7BA2A', '#FF9900']">
              </el-rate>
            </div>
            <div class="discuss">
              <p class="alen">评论： </p>
              <div class="discuss-text">
                <input type="text" placeholder="请输入您的评论......" />
                <div class="btn">
                  <button>提交</button>
                  <button>重置</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="message-right">
        <h4>热门媒体</h4>
        <div class="small-model">
          <img src="../assets/ym-details/details6.png" />
          <p>媒体名称媒体名称媒体名称</p>
          <p class="price">价格：120万 元/年</p>
          <p class="path">高速路线：北京五环绕城高速</p>
        </div>
        <div class="small-model">
          <img src="../assets/ym-details/details6.png" />
          <p>媒体名称媒体名称媒体名称</p>
          <p class="price">价格：120万 元/年</p>
          <p class="path">高速路线：北京五环绕城高速</p>
        </div>
        <div class="text-model">
          <p>媒体名称媒体名称媒体名称</p>
          <p>媒体名称媒体名称媒体名称</p>
          <p>媒体名称媒体名称媒体名称</p>
          <p>媒体名称媒体名称媒体名称</p>
          <p>媒体名称媒体名称媒体名称</p>
          <p>媒体名称媒体名称媒体名称</p>
        </div>
      </div>
    </div>
<!--  相关媒体资源  -->
    <div class=" yingmoo-xxx">
      <div class="column-navbar grey">
        <h1 class="column-title">
          <img class="column-icon" src="../assets/ym-index/icon-yun1.png" />
          <span class="column-name">相关媒体资源</span>
          <img class="column-arrow" src="../assets/ym-index/bg-arrow.png" />
        </h1>
      </div>
      <div class="column-content">
        <dl class="media-model" v-for="n in model" :key="n">
          <dt>
            <img src="../assets/ym-details/imges.png" />
          </dt>
          <dd class="media-text-first">{{n.modeltext}}</dd>
          <dd class="media-text-secend">{{n.modelmoney}}</dd>
          <dd class="media-text-city">{{n.modelcity}}<span>{{n.modellook}}</span></dd>
        </dl>
      </div>
    </div>
<!--  媒体主其他媒体  -->
    <div class=" yingmoo-xxx">
      <div class="column-navbar grey">
        <h1 class="column-title">
          <img class="column-icon" src="../assets/ym-index/icon-yun1.png" />
          <span class="column-name">媒体主其他媒体</span>
          <img class="column-arrow" src="../assets/ym-index/bg-arrow.png" />
        </h1>
      </div>
      <div class="column-content">
        <dl class="media-model" v-for="n in model" :key="n">
          <dt>
            <img src="../assets/ym-details/imges.png" />
          </dt>
          <dd class="media-text-first">{{n.modeltext}}</dd>
          <dd class="media-text-secend">{{n.modelmoney}}</dd>
          <dd class="media-text-city">{{n.modelcity}}<span>{{n.modellook}}</span></dd>
        </dl>
      </div>
    </div>
<!--  footer  -->
    <div class="footer-bar">
      <div class="footer-bg">
        <div class="w1200 footer-about clearfix">
          <ul>
            <h5>关于</h5>
            <li><a href="javascript:;">关于我们</a></li>
            <li><a href="javascript:;">加入我们</a></li>
            <li><a href="javascript:;">团队</a></li>
          </ul>
          <ul>
            <h5>服务</h5>
            <li><a href="javascript:;">服务条款</a></li>
            <li><a href="javascript:;">隐私协议</a></li>
          </ul>
          <ul>
            <h5>产品</h5>
            <li><a href="javascript:;">如何使用</a></li>
            <li><a href="javascript:;">视频介绍</a></li>
            <li><a href="javascript:;">更新历史</a></li>
            <li><a href="javascript:;">FAQ</a></li>
          </ul>
          <div class="we">
            <h5>关注我们</h5>
            <p class="icons">
              <a href="javascript:;"><img src="../assets/ym-footer/icon-wb.png" /></a>
              <a href="javascript:;"><img src="../assets/ym-footer/icon-wx.png" /></a>
              <a href="javascript:;"><img src="../assets/ym-footer/icon-qq.png" /></a>
            </p>
            <p class="text">鹰目户外广告网是中国最大的户外广告投放平台，户外媒体行业服务平台。鹰目网秉承以 “为客户提供有价值的服务” 为宗旨，围绕 “做专” “做专业” “做精细” 的服务方针，坚持 “只做服务商” 的经营理念，致力于以顾问形式，服务于户外广告买卖双方。</p>
          </div>
        </div>
      </div>
      <div class="footer-copyright">
        <div class="w1200">
          <div class="copyright">
            <p>
              <span>Copyright @ 2012-2017</span>
              <span>北京鹰目网络科技有限公司</span>
              <span>京ICP备14044439号-1</span>
              <img src="../assets/ym-footer/icon-g.png" />
              <span>京公网安备 11010802020633号</span>
            </p>
            <p>
              <span>地址：北京市海淀区上地东路35号颐泉汇大厦D座5层</span>
              <span>热线：400 650 7893</span>
              <span>传真：010-62681689/8248335</span>
            </p>
          </div>
          <div class="safety clearfix">
              <a href="javascript:;"><img src="../assets/ym-footer/safe-360.png" /></a>
              <a href="javascript:;"><img src="../assets/ym-footer/safe-kexin.png" /></a>
              <a href="javascript:;"><img src="../assets/ym-footer/safe-aqlm.png" /></a>
          </div>
        </div>
        </div>
    </div>
 </div>
</template>
<script>
  export default {
    name: "yingmoo-media",
    data() {
      return {
        value1: null,
        value2: null,
        shoq: 0,
        show: 0,
        shos: 1,
        shon: 0,
        shom: 0,
        model: [{
          modeltext: '媒体名称媒体名称媒体名称',
          modelmoney: '价格：120万 元/年',
          modelcity: '北京西站',
          modellook: '看板'
        }, {
          modeltext: '媒体名称媒体名称媒体名称',
          modelmoney: '价格：120万 元/年',
          modelcity: '北京西站',
          modellook: '看板'
        }, {
          modeltext: '媒体名称媒体名称媒体名称',
          modelmoney: '价格：120万 元/年',
          modelcity: '北京西站',
          modellook: '看板'
        }, {
          modeltext: '媒体名称媒体名称媒体名称',
          modelmoney: '价格：120万 元/年',
          modelcity: '北京西站',
          modellook: '看板'
        }, {
          modeltext: '媒体名称媒体名称媒体名称',
          modelmoney: '价格：120万 元/年',
          modelcity: '北京西站',
          modellook: '看板'
        }]

      }
    }
  }

</script>
<style scoped>
  .block[data-v-750bdc8a] {
    color: #036eb7;
    font-size: 14px;
    padding-left: 10px;
    margin-top: 30px;
    line-height: 20px;
  }

  .block {
    width: 200px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
  }

</style>
<style scoped lang="less">
  .yingmoo-details {
    width: 100%;
    background-color: #f3f9ff;
    .yingmooHerader {
      .header {
        width: 100%;
        height: 45px;
        background-color: #e6e6e6;
        p {
          width: 1200px;
          margin: 0 auto;
          line-height: 45px;
          font-size: 14px;
          color: #666666;
          .register {
            margin-left: 125px;
          }

          .login {
            color: #f29600;
            margin-left: 43px;
          }

          .merchant {
            margin-left: 25px;
            margin-right: 136px;
            padding: 0 5px 1px 5px;
            width: 99px;
            height: 22px;
            background-color: #f29600;
            color: white;
          }
          .tel {
            margin-left: 105px;
          }

          .tel_img {
            padding-left: 5px;
            padding-right: 5px;
          }

          .num {
            font-weight: bold;
            color: #f29600;
          }
        }
      }

      .member img,
      .mean img,
      .serve img {
        padding-left: 5px;
      }

      .member,
      .mean,
      .serve {
        margin-right: 20px;
      }

    }
    .yingmoo-medianav {
      width: 1200px;
      margin: 0 auto;
      margin-top: 30px;
      margin-bottom: 30px;
      display: flex;
      justify-content: space-around;
      .yingmoo_nav {
        width: 910px;
        display: flex;
        justify-content: space-between;
        .navlogo_text {
          width: 250px;
          margin-top: 20px;
        }
        .yingmoo_nav_mean {
          margin-top: 20px;
          .yingmoo_nav_mean_div {
            width: 495px;
            height: 44px;
            border: none;
            display: flex;
            justify-content: space-between;
            .yingmoo_page_ipt {
              width: 430px;
              background-color: white;
              opacity: 0.7;
              font-size: 24px;
            }
            div {
              border: none;
              font-size: 14px;
              p {
                line-height: 44px;
              }
            }
            .btn_soso {
              width: 86px;
              height: 44px;
              color: white;
              text-align: center;
              background-color: #f29600;
            }
            .btn_sousuo {
              width: 85px;
              height: 44px;
              text-align: center;
              margin-top: 9px;
            }
          }
        }
        .hot_sousuo {
          font-size: 11px;
          text-align: left;
          margin-top: 10px;
          color: #888888;
          span {
            margin-left: 13px;
          }
          span:hover {
            color: red;
            cursor: pointer;
          }
          .hot_sousuo1 {
            margin-right: 2px;
          }
        }
      }
      .btn_my {
        width: 260px;
        height: 44px;
        margin-top: 20px;
        display: flex;
        justify-content: space-between;
        div {
          width: 109px;
          background-color: #f29600;
          display: flex;
          justify-content: space-around;
          align-items: center;
          p {
            font-size: 14px;
            color: #036eb7;
          }
        }
        .btn_my_shopmall {
          width: 120px;
          border: 1px solid #036eb7;
          background-color: #f9f9f9;
          .img {
            width: 19px;
            height: 26px;
            background-color: #f9f9f9;
            background-image: url(../assets/ym-media/mine.png);
          }
          .img1 {
            width: 8px;
            height: 4px;
            background-color: #f9f9f9;
            background-image: url(../assets/ym-media/so.png);
          }
        }
        .btn_my_settle {
          width: 130px;
          border: 1px solid #036eb7;
          background-color: #f9f9f9;
          .img2 {
            width: 19px;
            height: 26px;
            background-color: #f9f9f9;
            background-image: url(../assets/ym-media/shopping.png);
          }
          .img1 {
            width: 8px;
            height: 4px;
            background-color: #f9f9f9;
            background-image: url(../assets/ym-media/so.png);
          }
        }
        .btn_my_settle:hover {
          border: 1px solid #f29600;
          cursor: pointer;
          p {
            color: #f29600;
          }
          .img2 {
            background-image: url(../assets/ym-media/shopping_hover.png);
          }
          .img1 {
            background-image: url(../assets/ym-media/so_hover.png);
          }
        }
        .btn_my_shopmall:hover {
          border: 1px solid #f29600;
          cursor: pointer;
          p {
            color: #f29600;
          }
          .img {
            background-image: url(../assets/ym-media/mine_hover.png);
          }
          .img1 {
            background-image: url(../assets/ym-media/so_hover.png);
          }
        }
      }
    }
    .yingmoo-column {
      height: 44px;
      width: 100%;
      margin: 0 auto;
      position: relative;
      .navstrip {
        width: 100%;
        height: 44px;
        background-color: #3fa9f5;
      }
      .navbag {
        width: 1200px;
        height: 44px;
        margin: 0 auto;
        position: relative;
        top: -44px;
        .column-navbar {
          .column-title {
            width: 247px;
            background-color: #036eb7;
            text-align: center;
            line-height: 44px;
            font-size: 16px;
            color: #f29600;
            position: relative;
            .column-arrow {
              position: absolute;
              top: 0;
              left: 247px;
              z-index: 90;
            }
          }
          .media-nav-tab {
            float: left;
            width: 247px;
            z-index: 11;
            background-image: url(../assets/ym-index/bg-left1.png);
            background-repeat: no-repeat;
            background-color: #036eb7;
            background-position: bottom;
            position: absolute;
            li {
              color: white;
              text-align: center;
              line-height: 45px;
              font-size: 15px;
              &:hover {
                color: #f29600;
                background-color: #c7e8fa;
                cursor: pointer;
              }
            }
          }
          .coverage {
            width: 249px;
            height: 450px;
            background-color: rgba(217, 239, 252, 0.6);
            z-index: 999;
            position: absolute;
            top: 45px;
            left: 247px;
            button {
              width: 130px;
              height: 45px;
              background-color: #f29600;
              color: white;
              text-align: center;
              border: none;
              font-size: 16px;
              margin-left: 60px;
              margin-top: 15px;
            }
            ul {
              margin-left: 40px;
              margin-top: 30px;
              li {
                list-style: none;
                line-height: 32px;
                font-size: 14px;
                color: #333333;
              }
              li:hover {
                color: #f29600;
              }
            }
            ul:nth-child(2) {
              float: left;
              margin-right: 50px;
            }

          }
        }
        .column-subtitle {
          width: 953px;
          height: 44px;
          margin-left: 247px;
          background-color: #3fa9f5;
          display: flex;
          justify-content: space-between;
          line-height: 44px;
          color: white;
          position: absolute;
          top: 0;
          left: 0;
          cursor: pointer;
          li {
            width: 136px;
            text-align: center;
            color: #fff;
            font-size: 15px;
            background-image: url(../assets/ym-index/bg-nav.png);
            background-position: left center;
            background-repeat: no-repeat;
            &:last-child {
              border-right: none;
            }
            &:hover {
              background-color: darken(#3fa9f5, 10%);
            }
          }
        }
      }
    }
    .locat {
      width: 1200px;
      height: 50px;
      margin: 0 auto;
      display: flex;
      img {
        width: 10px;
        height: 14px;
        margin-top: 19px;
        margin-right: 5px;
      }
      p {
        font-size: 12px;
        line-height: 50px;
        color: #666666;
        font-weight: bold;
        span {
          font-weight: 1;
        }
        .text {
          color: #f29600;
        }
      }
    }
    .clunm-conten {
      width: 1200px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      .clunm-result {
        width: 950px;
        display: flex;
        background-color: white;
        .clunm-left {
          height: 435px;
          width: 515px;
          .result-top {
            height: 339px;
            width: 514px;
            overflow: hidden;
          }
          .result-down {
            width: 515px;
            display: flex;
            justify-content: space-around;
            margin-top: 15px;
          }
        }
        .clunm-right {
          margin-left: 30px;
          h3 {
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 13px;
            margin-top: 10px;
          }
          .time {
            color: #999999;
          }
          p {
            font-size: 14px;
            color: #666666;
            margin-bottom: 20px;
          }
          button {
            width: 130px;
            height: 40px;
            border: none;
            font-size: 14px;
          }
          .hot {
            background-color: #e6e6e6;
            color: #999999;
            background-image: url(../assets/ym-details/hot.png);
            background-repeat: no-repeat;
            background-position: 25% center;
            text-align: center;
            padding-left: 30px;
            &:hover {
              background-image: url(../assets/ym-details/hot-hover.png);
              color: #f29600;
            }
          }
          .shop {
            background-color: #f29600;
            color: white;
            background-image: url(../assets/ym-details/shop.png);
            background-repeat: no-repeat;
            background-position: 15% center;
            text-align: center;
            padding-left: 30px;
            &:hover {
              background-color: #bf7d1f;
            }
          }
        }
      }
      .shop-detail {
        width: 225px;
        height: 435px;
        text-align: center;
        background-color: white;
        h4 {
          color: white;
          background-color: #036eb7;
          line-height: 41px;
          font-size: 18px;
          text-align: center;
          font-weight: bold;
        }
        h3 {
          font-weight: bold;
          margin-top: 5px;
          line-height: 55px;
        }
        img {
          margin-bottom: 5px;
        }
        p {
          font-size: 14px;
          color: #333333;
          padding-top: 19px;
        }
        button {
          width: 139px;
          height: 42px;
          font-size: 14px;
          color: white;
          background-color: #f29600;
          border: none;
          margin-top: 25px;
        }
      }
    }
    .details-message {
      width: 1200px;
      height: 770px;
      margin: 0 auto;
      margin-top: 25px;
      display: flex;
      justify-content: space-between;
      .message-left {
        width: 950px;
        height: 765px;
        overflow: hidden;
        .tab-nav {
          display: flex;
          width: 950px;
          height: 40px;
          background-color: white;
          li {
            width: 135px;
            height: 40px;
            border: 1px solid #e6e6e6;
            color: #666666;
            line-height: 40px;
            text-align: center;
            background-color: white;
            &:hover {
              color: white;
              background-color: #036eb7;
              border: 1px solid #036eb7;
            }
            &:nth-child(1) {
              border-right: none;
            }
            &:nth-child(2) {
              border-right: none;
            }
          }
        }
        .message {
          height: 722px;
          .classify {
            display: flex;
            ul {
              width: 340px;
              margin-top: 25px;
              margin-left: 5px;
              li {
                font-size: 15px;
                color: #666666;
                font-weight: bold;
                line-height: 34px;
                span {
                  color: #999999;
                  font-weight: 100;
                }
              }
            }
          }
          .media-intro {
            width: 935px;
            margin-top: 20px;
            p {
              font-size: 15px;
              color: #666666;
              font-weight: bold;
              line-height: 28px;
              span {
                color: #999999;
                font-weight: 100;

              }
            }
          }
          .firm-intro {
            width: 935px;
            margin-top: 25px;
            p {
              font-size: 15px;
              color: #666666;
              font-weight: bold;
              line-height: 28px;
              span {
                color: #999999;
                font-weight: 100;

              }
            }
          }
          .discusses-nav {
            width: 910px;
            height: 40px;
            background-color: #e6e6e6;
            color: #666666;
            font-size: 14px;
            line-height: 40px;
            padding-left: 40px;
            margin: 30px 0 20px 0;
          }
          .discusses {
            p {
              width: 935px;
              font-size: 14px;
              padding-left: 10px;
              line-height: 30px;
              span {
                color: #666666;
                width: 445px;
                display: inline-block;
              }
              .text {
                width: 75px;
                color: #036eb7;
              }
              .imges {
                width: 150px;
                padding-left: 22px;
              }
              .score {
                width: 45px;
                color: #f29600;
                font-weight: bold;
              }
              .time {
                width: 160px;
                text-align: right;
                margin-left: 38px;
              }
            }
          }
          .synthesize {
            p {
              width: 935px;
              font-size: 14px;
              padding-left: 10px;
              line-height: 37px;
              color: #666666;
              span {
                width: 445px;
                display: inline-block;
                line-height: 50px;
              }
              .text {
                width: 75px;
              }
              .imges {
                width: 150px;
                padding-left: 12px;
                position: relative;
                top: 5px;
              }
              .score {
                width: 45px;
                color: #f29600;
                font-size: 20px;
                font-weight: bold;
                position: relative;
                top: 2px;
              }
            }
            .discuss {
              width: 555px;
              height: 80px;
              display: flex;
              .alen {
                width: 80px;
                height: 80px;
                line-height: 80px;
                display: inline-block;
              }
              .discuss-text {
                input {
                  width: 465px;
                  height: 80px;
                  border: 1px solid #036eb7;
                  background-color: #f1faff;
                  padding-left: 10px;
                  font-size: 14px;
                  margin-left: 20px;
                }
                .btn {
                  button {
                    width: 100px;
                    height: 30px;
                    background-color: #e6e6e6;
                    border: none;
                    font-size: 14px;
                    color: #666666;
                    outline: none;
                    line-height: 30px;
                    margin-top: 20px;
                    &:nth-child(1) {
                      margin-left: 20px;
                    }
                    &:nth-child(1):hover {
                      color: #f29600;
                    }
                    &:nth-child(2) {
                      margin-left: 24px;
                      background-color: #f29600;
                      color: white;
                    }
                    &:nth-child(2):hover {
                      background-color: #bf7d1f;
                    }
                  }
                }
              }
            }
          }
        }
      }
      .message-right {
        width: 225px;
        height: 770px;
        h4 {
          font-size: 20px;
          border-bottom: 3px solid #036eb7;
          line-height: 38px;
          color: #036eb7;
          font-weight: bold;
        }
        .small-model {
          width: 225px;
          height: 235px;
          background-color: white;
          margin-top: 20px;
          img {
            width: 100%;
          }
          p {
            font-size: 16px;
            color: #333333;
            line-height: 25px;
            text-align: center;
          }
          .price {
            font-size: 14px;
            color: #f29600;
          }
          .path {
            font-size: 14px;
            color: #999999;
          }
        }
        .text-model {
          p {
            font-size: 16px;
            color: #333333;
            line-height: 33px;
            text-align: center;
            &:nth-child(1) {
              margin-top: 12px;
            }
          }
        }
      }
    }
    .yingmoo-xxx {
      width: 1200px;
      height: 300px;
      margin: 0 auto;
      background-color: transparent;
      margin-top: 30px;
      .column-navbar {
        height: 44px;
        line-height: 44px;
        position: relative;
        &.grey {
          background-color: #e6e6e6;
        }
        .column-title {
          position: absolute;
          left: 0;
          top: 0;
          z-index: 1;
          width: 247px;
          color: #fbb03b;
          font-size: 18px;
          background-color: #036eb7;
          .column-icon {
            margin-left: 26px;
          }
          .column-arrow {
            position: absolute;
            right: -26px;
            top: 0;
          }
        }
      }
      .column-content {
        width: 1200px;
        background-color: transparent;
        margin-bottom: 20px;
        display: flex;
        justify-content: space-between;
        .media-model {
          width: 224px;
          height: 235px;
          margin-top: 20px;
          dd {
            background-color: white;
            height: 24px;
            line-height: 24px;
            padding-left: 10px;
          }
          .media-text-first {
            font-size: 15px;
            padding-top: 9px;
          }
          .media-text-secend {
            font-size: 12px;
            color: #f29600;
          }
          .media-text-city {
            font-size: 12px;
            color: #999999;
            padding-bottom: 6px;
            span {
              padding-left: 15px;
            }
          }
        }
      }
    }
    .footer-bar {
      .w1200 {
        width: 1200px;
        margin: 0 auto;
        padding-left: 16px;
        padding-right: 16px;
      }

      .footer-bg {
        height: 240px;
        background-color: #f3f9ff;
        /*    background: linear-gradient(to bottom, #c6dbed 0%,#f3f9ff 100%);*/
        background-image: url(../assets/ym-footer/ymDetailsfooter-bg.png);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: top center;
      }
      .footer-about {
        margin-top: 30px;
        h5 {
          &:extend(.footer-links h5);
        }
        ul {
          width: 180px;
          float: left;
          h5 {
            padding-top: 35px;
            padding-bottom: 20px;
            color: #f29600;
            font-weight: bold;
            font-size: 18px;
          }
          li {
            &:extend(.footer-links p);
            line-height: 36px;
            a {
              font-size: 16px;
              color: white;
              &:extend(.footer-links p a);
            }
          }
        }
        .we {
          float: right;
          width: 520px;
          h5 {
            font-size: 18px;
            padding-top: 35px;
            color: #f29600;
            font-weight: bold;
          }
          .icons {
            padding-top: 15px;
            padding-bottom: 8px;
            a {
              margin-right: 22px;
            }
          }
          .text {
            color: white;
            line-height: 28px;
            margin-right: 0;
            font-size: 16px;
          }
        }
      }

      .footer-copyright {
        height: 108px;
        background: #1a1a1a;
        .w1200 {
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
        }
        .copyright {
          color: #fff;
          font-size: 14px;
          line-height: 30px;
          p {
            display: flex;
            align-items: center;
          }
          span {
            margin-right: 10px;
          }
          img {
            margin-right: 3px;
          }
        }
        .safety a {
          float: left;
          margin-left: 12px;
          img {
            display: block;
          }
        }
      }
    }
  }

</style>


